@import '../../styles/util'

\:host
  display: flex
  align-items: center
  justify-content: flex-start
  color: $text-mute
  font-size: 14px

  > div, > div > div:not(.page-node-box), .fui-select, input
    margin-right: 10px

\:host ::ng-deep
  .fui-select
    min-width: 60px
    padding-right: 6px

    .fui-select-label
      margin-right: 0

  input
    width: 60px

.fui-btn
  height: 2rem
  color: $text-mute

.page-total,
.page-select,
.page-nodes,
.page-input
  display: flex
  align-items: center

.page-nodes
  svg
    fill: $text-mute

    &.left-angle
      margin-right: 14px

    &.right-angle
      margin-left: 14px

    &.disabled
      fill: $text-disabled

    &:hover:not(.disabled)
      cursor: pointer
      fill: $brand-primary

.page-node
  @include flex-xy-center
  width: 1.75rem
  height: 1.75rem
  cursor: pointer
  margin-right: 2px

  &.active, &:hover
    color: $brand-primary

.page-omit
  padding: 0 12px
